<template>
    <div class="nav">
      <Breadcrumb>
        <BreadcrumbItem>管控</BreadcrumbItem>
        <BreadcrumbItem>集采管控</BreadcrumbItem>
        <BreadcrumbItem>任务执行</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="tab">
      <Tabs value="name1" :animated="false" style="padding: 10px;">
        <TabPane label="任务列表" name="rwlb">
          <div class="rwlb">
            <vxe-grid v-bind="gridOptions1">
              <template #toolbar_buttons>
                
                  <div class="a">
                    <Select v-model="model" style="width: 220px;" placeholder="请选择集采任务">
                        <Option
                          v-for="item in stateList"
                          :value="item.value"
                          :key="item.value"
                          >{{ item.label }}</Option
                        >
                      </Select>
                      <Select v-model="model" style="width: 200px;padding:10px" placeholder="请选择组织结构">
                        <Option
                          v-for="item in stateList"
                          :value="item.value"
                          :key="item.value"
                          >{{ item.label }}</Option
                        >
                      </Select>
  
                    <vxe-input
                      v-model="searchName"
                      style="width: 300px"
                      placeholder="请输入药品名称"
                    ></vxe-input>
                    <vxe-button status="primary">搜索</vxe-button>
                  </div>
  
                  
                
              </template>
            </vxe-grid>
          </div>
        </TabPane>
        <TabPane label="统计报告" name="tjbg">
  
          <div class="tjbg">
  
            <vxe-grid v-bind="gridOptions2" >
            <template #toolbar_buttons>
              
              <Select v-model="model" style="width: 220px;padding:10px" placeholder="请选择集采任务">
                <Option
                  v-for="item in stateList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
              <Select v-model="model" style="width: 180px;padding:10px" placeholder="基于组织结构统计">
                <Option
                  v-for="item in stateList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
              <Select v-model="model" style="width: 180px;padding:10px" placeholder="请选择组织结构">
                <Option
                  v-for="item in stateList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
              
  
              <vxe-input
                v-model="searchName"
                style="width: 300px"
                placeholder="请输入部门名称"
              ></vxe-input>
              <vxe-button status="primary">搜索</vxe-button>
            </template>
          </vxe-grid>
          </div>
          
        </TabPane>
        
      </Tabs>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from "vue";
  const gridOptions1 = reactive({
    border: true,
    keepSource: true,
    showOverflow: true,
  
    id: "toolbar_demo_2",
    loading: false,
    columnConfig: {
      resizable: true,
    },
    customConfig: {
      storage: true,
    },
    editConfig: {
      trigger: "click",
      mode: "row",
      showStatus: true,
    },
    toolbarConfig: {
      zoom: true,
      custom: true,
      slots: {
        buttons: "toolbar_buttons",
      },
    },
    columns: [
      
      { field: "id", title: "序号", width: 70, align: "center" },
      { field: "name", title: "药品名称", width: 184 },
      { field: "prescription", title: "药品单价", width: 180 },
      { field: "diagnosis", title: "组织结构名称" ,align: "center" },
      { field: "Department", title: "本年度集采任务总量", width: 100, align: "center" },
      { field: "state", title: "本年度已完成集采任务量", width: 120, align: "center" },
      { field: "Interventions", title: "本年度剩余集采任务量", width: 120, align: "center" },
      { field: "operate", title: "本年度集采任务完成占比", width: 150, align: "center" },
    ],
    data: [
      {
        id: 1,
        name: "陈文婷",
        prescription: "321",
        diagnosis: "肺炎：肺部感染，通常由",
        Department: "--",
        state: 28,
        Interventions: "Shenzhen",
        date: "2023-12-07 15:54:12",
        operate: "查看",
      },
      {
        id: 2,
        name: "吕致盈",
        prescription: "322",
        diagnosis: "胃溃疡：胃黏膜下层或",
        Department: "--",
        state: 22,
        Interventions: "Guangzhou",
        date: "2023-12-07 15:54:12",
        operate: "查看",
      },
      {
        id: 3,
        name: "陈文婷",
        prescription: "325",
        diagnosis: "高血压：血压持续升高",
        Department: "--",
        state: 32,
        Interventions: "Shanghai",
        date: "2023-12-07 15:54:12",
        operate: "查看",
      },
      {
        id: 4,
        name: "陈文婷",
        prescription: "327",
        diagnosis: "1",
        Department: "中药部门",
        state: 23,
        Interventions: "Shenzhen",
        date: "2023-12-07 15:54:12",
        operate: "查看",
      },
     
    ],
  });
  
  const gridOptions2 = reactive({
    border: true,
    keepSource: true,
    showOverflow: true,
  
    id: "toolbar_demo_2",
    loading: false,
    columnConfig: {
      resizable: true,
    },
    customConfig: {
      storage: true,
    },
    editConfig: {
      trigger: "click",
      mode: "row",
      showStatus: true,
    },
    toolbarConfig: {
      custom: true,
      slots: {
        buttons: "toolbar_buttons",
      },
    },
    columns: [
      { field: "id", title: "序号", align: "center" },
      { field: "name", title: "统计周期" },
      { field: "prescription", title: "组织机构名称" },
      { field: "diagnosis", title: "集采名称" },
      { field: "Department", title: "平均集采任务完成率", width: 100, align: "center" },
      { field: "state", title: "销售总金额", width: 120, align: "center" },
      { field: "state", title: "操作", width: 120, align: "center" },
    ],
    data: [
      {
        id: 1,
        name: "陈文婷",
        prescription: "321",
        diagnosis: "肺炎：肺部感染，通常由",
        Department: "--",
        state: 28,
        Interventions: "Shenzhen",
        date: "2023-12-07 15:54:12",
        operate: "查看",
      },
      {
        id: 2,
        name: "吕致盈",
        prescription: "322",
        diagnosis: "胃溃疡：胃黏膜下层或",
        Department: "--",
        state: 22,
        Interventions: "Guangzhou",
        date: "2023-12-07 15:54:12",
        operate: "查看",
      },
     
    ],
  });
  
  
  </script>
  
  <style scoped>
  .nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    font-size: 20px;
  }
  .rwlb {
    border-right: 20px solid #ffffff;
    border-left: 20px solid #ffffff;
  }
 
  
  .tjbg{
    border-right: 20px solid #ffffff;
    border-left: 20px solid #ffffff;
  }
 
  
  </style>